//This script is 99% from http://raphaeljs.com/
$(window).load(function () {
    // Grab the data
    var data = [],
        axisx = [],
        axisy = [],
        table = $("#for-chart");
    $("tbody td", table).each(function (i) {
        data.push(parseFloat($(this).text(), 10));
    });
    table.hide();
    $("tbody th", table).each(function () {
        axisy.push($(this).text());
    });
    $("tfoot th", table).each(function () {
        axisx.push($(this).text());
    });
    // Draw
    var width = 830,
        height = 350,
        leftgutter = 30,
        bottomgutter = 20,
        r = Raphael("chart", width, height),
        txt = {"font": '9px "Arial"', stroke: "none", fill: "#ccc"},
        X = (width - leftgutter) / axisx.length,
        Y = (height - bottomgutter) / axisy.length,
        color = $("#chart").css("color");
        max = Math.round(X / 2) - 1;
    // r.rect(0, 0, width, height, 5).attr({fill: "#000", stroke: "none"});
    for (var i = 0, ii = axisx.length; i < ii; i++) {
        r.text(leftgutter + X * (i + .5), 344, axisx[i]).attr(txt);
    }
    for (var i = 0, ii = axisy.length; i < ii; i++) {
        r.text(10, Y * (i + .5), axisy[i]).attr(txt);
    }
    var o = 0;
    for (var i = 0, ii = axisy.length; i < ii; i++) {
        for (var j = 0, jj = axisx.length; j < jj; j++) {

            ///////////////////////////////////////////////////////////////////////////////////////////////////////////
            // Change the divisor below to alter the size and color of the circles.
            ///////////////////////////////////////////////////////////////////////////////////////////////////////////

            //Value used to be 23, then 26 for Dec 2009 data, but with more loans the number must increase.
            var R = data[o] && Math.min(Math.round(Math.sqrt(data[o] / 35 / Math.PI) * 4), max);
            if (R) {
                (function (dx, dy, R, value) {
                    //alert("i = "+i+", axisy.length = "+ axisy.length);
                    //Use grey for totals row and column
                    var color;
                    if (i == axisy.length-1 || j == axisx.length-1)
                    {
                      color = "hsb(" + [0, 0, 0.25] + ")";
                    }
                    else
                    {
                      color = "hsb(" + [(1 - R / max) * .5, 1, .75] + ")";
                    }

                    //var dt = r.circle(dx + 60 + R, dy + 10, R).attr({stroke: "none", fill: color});
                    //Don't color the totals
                    var dt;
                    if (i == axisy.length-1 || j == axisx.length-1)
                    {
                      dt = r.circle(dx + 60 + R, dy + 10, R).attr({stroke: "none"});
                    }
                    else
                    {
                      dt = r.circle(dx + 60 + R, dy + 10, R).attr({stroke: "none", fill: color});
                    }                    

                    if (R < 6) {
                        var bg = r.circle(dx + 60 + R, dy + 10, 6).attr({stroke: "none", fill: "#000", opacity: .4}).hide();
                    }
                    //var lbl = r.text(dx + 60 + R, dy + 13, data[o])
                    //        .attr({"font": '10px "Arial"', stroke: "none", fill: "#fff"}).hide();

                    //Don't hide labels for totals
                    var lbl;
                    if (i == axisy.length-1 || j == axisx.length-1)
                    {
                      var lbl = r.text(dx + 60 + R, dy + 13, data[o])
                            .attr({"font": '10px "Arial"', stroke: "none", fill: "#fff"});
                    }
                    else
                    {
                      var lbl = r.text(dx + 60 + R, dy + 13, data[o])
                           .attr({"font": '10px "Arial"', stroke: "none", fill: "#fff"}).hide();
                    }                    


                    var dot = r.circle(dx + 60 + R, dy + 10, max).attr({stroke: "none", fill: "#000", opacity: 0});
                    //Only create mouseovers for non-totals
                    if (i != axisy.length-1 && j != axisx.length-1)
                    {
                      dot[0].onmouseover = function () {
                          if (bg) {
                              bg.show();
                          } else {
                              var clr = Raphael.rgb2hsb(color);
                              clr.b = .5;
                              dt.attr("fill", Raphael.hsb2rgb(clr).hex);
                          }
                          lbl.show();
                      };
                      dot[0].onmouseout = function () {
                          if (bg) {
                              bg.hide();
                          } else {
                              dt.attr("fill", color);
                          }
                          lbl.hide();
                      };
                    }
                })(leftgutter + X * (j + .5) - 60 - R, Y * (i + .5) - 10, R, data[o]);
            }
            o++;
        }
    }
});